<template>
  <div
    :style="{height: height === 'auto' ? '129px' : height + 'px'}"
    style="width:232px"
  >
    <div style="height:52px;border-left:2px solid #00704E;color:#fff">
      <div style="padding-left:10px;height:40%;font-size:14px">场馆重要负荷曲线/KW</div>
      <div style="padding-left:10px;height:60%;">
        <div style="width:90px;height:100%;background: #429C82;border-radius: 4px;display: flex;justify-content: center;align-items: center;">
          <span style="font-size:14px;">照明</span><span style="font-size:24px;margin-left:2px">159</span>
        </div>
      </div>
    </div>
      <div
        style="height:calc(100% - 57px);background: linear-gradient(0deg, rgba(244, 246, 247,0.18) 0%, rgba(244, 246, 247,0) 100%);width:100%;"
        ref="myChart"
      >
      </div>
    </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      height: 129,
      data: [
        [30, 182, 434, 791, 390, 30, 10],
        [130, 82, 34, 91, 30, 90, 10],
        [10, 12, 21, 54, 260, 830, 710],
      ],
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      var myChart = echarts.init(this.$refs.myChart);
      var option = {
        tooltip: {
          trigger: "item",
        },
        color: ["#4ea08a", "#5a91b6", "#18f6b6"],
        grid: {
          // show: true,
          left: "-9%",
          right: "4%",
          top: "4%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          show: false,
          boundaryGap: false,
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          show: false,
        },
        series: [
          {
            name: "成交",
            type: "line",
            symbolSize: 4,
            smooth: true,
            data: this.data[0],
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 3, //设置线条粗细
                },
              },
              // 鼠标经过时：
              emphasis: {
                color: "#419C81",
                borderColor: "#fff",
              },
            },
          },
          {
            name: "预购",
            type: "line",
            symbolSize: 4,
            smooth: true,
            data: this.data[1],
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 3, //设置线条粗细
                },
              },
              emphasis: {
                color: "#419C81",
                borderColor: "#fff",
              },
            },
          },
          {
            name: "选购",
            type: "line",
            symbolSize: 4,
            smooth: true,
            data: this.data[2],
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 3, //设置线条粗细
                },
              },
              emphasis: {
                color: "#419C81",
                borderColor: "#fff",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
.css {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>